<template>
  <div :id="idString" style="height:280px;">
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    props: {

    },
    data () {
      return {
        idString: ''
      }
    },
    created () {
      this.idString = 'chart_' + Math.random().toString(32).substr(6)
    },
    computed: {
      chartOption () {
        return {
          tooltip: {
            show: true,
            trigger: 'axis',
            backgroundColor: 'rgba(0,0,0,0.60)', // 设置背景颜色
            textStyle: {
              color: '#ffffff',
              // color: function (param) {
              //   console.log(param, ";;;;;;");
              //   return param;
              // },
              fontSize: 14
            },
            borderColor: 'rgba(255, 255, 255, .16)',
            axisPointer: {
              lineStyle: {
                color: 'rgba(28, 124, 196)'
              }
            },
            // formatter: "{b}人员类别统计<br>{c}人"
            formatter: function (params, ticket, callback) {
              let htmlStr = ''
              htmlStr += params[0].name
              for (let i = 0; i < params.length; i++) {
                let param = params[i]
                let seriesName = param.seriesName // 图例名称
                let value = param.value // y轴值
                let color = param.color // 图例颜色
                htmlStr += '<div>'
                htmlStr +=
                  '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                  color +
                  ';"></span>' // 一个点
                htmlStr += `<span style="color:#ffffff">${seriesName} : ${value}%</span>` // 圆点后面显示的文本
                // console.log(seriesName, value);
                htmlStr += '</div>'
              }
              return htmlStr
            }
          },
          legend: {
            icon: 'roundRect',
            top: 0,
            left: 120,
            itemWidth: 15,
            itemHeight: 15
          },
          color: [
            'rgb(0, 172, 73)',
            'rgb(56, 154, 255)',
            'rgb(162, 88, 236)',
            'rgb(255, 152, 6)'
          ],

          grid: {
            top: '20%',
            left: '5%',
            right: '2%',
            bottom: '14%'
          },
          xAxis: [
            {
              type: 'category',
              axisLine: {
                lineStyle: {
                  color: '#33317E'
                }
              },
              axisLabel: {
                interval: 0,
                margin: '20',
                color: '#000000',
                textStyle: {
                  fontSize: 14
                }
              },
              splitLine: {
                show: true

              },
              axisTick: {
                show: true
              },
              boundaryGap: true,
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] // this.$moment(data.times).format("HH-mm") ,
            }
          ],

          yAxis: [
            {
              type: 'value',
              // splitNumber: 6,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#33317E'
                }
              },
              splitNumber: 4,
              splitLine: {
                show: false,
                lineStyle: {
                  color: 'rgb(221, 228, 241)',
                  type: 'dashed'
                }
              },
              axisLabel: {
                color: '#000000',
                textStyle: {
                  fontSize: 14
                },
                formatter: '{value}%'
              },
              axisTick: {
                show: false
              }
            }
          ],
          series: [
            {
              name: '同比',
              type: 'line',
              showSymbol: true,
              symbolSize: 8,
              symbol: 'circle',
              lineStyle: {
                color: '#33317E'
              },
              itemStyle: {
                color: '#33317E',
                borderColor: '#ffffff',
                borderWidth: 2
              },
              data: [30, 13, 45, 36, 22, 14, 34, 55, 44, 87, 34, 23] // data.values
            },

            {
              name: '环比',
              type: 'line',
              showSymbol: true,
              symbolSize: 8,
              symbol: 'circle',
              lineStyle: {
                color: '#F27011'
              },
              itemStyle: {
                color: '#F27011',
                borderColor: '#ffffff',
                borderWidth: 2
              },
              // emphasis: {
              //     itemStyle: {
              //         color: "#fff",
              //         borderColor: "#16D6FF",
              //         borderWidth: 2,
              //     },
              // },
              data: [20, 23, 25, 36, 32, 24, 44, 45, 54, 67, 45, 24] // data.values
            }

          ]
        }
      }
    },
    async mounted () {
      const myChart = echarts.init(document.getElementById(this.idString))
      myChart.setOption(this.chartOption)
    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
</style>
